<template>
  <div>
    <span class="posTit">供应商上月交期达成率</span>
    <!--  折线图  -->
    <div id="lineChart" ref="lineChart" />
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import { GridComponent } from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { querySupplierPercentage } from '@/api/homePageNew/salesman'

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition])

export default {
  data() {
    return {
      dataTime: [], // x轴 日期
      allPrice: [], // y轴 销售金额
      legend: []
    }
  },
  created() {
    this.querySalerRankTable()
  },
  methods: {
    querySalerRankTable() {
      querySupplierPercentage({}).then(res => {
        res.data.forEach(item => {
          this.dataTime = item.details.map((res) => res.fdate)
          this.legend.push(item.fsupplier)
          this.allPrice.push({
            name: item.fsupplier,
            data: item.details.map((res) => res.percentage),
            type: 'line', // 类型 - 线
            label: {
              show: true // 是否显示标签
            },
            smooth: true // 平滑显示
          })
        })
        this.drawLine()
      })
    },
    // 模板
    drawLine() {
      // // 基于准备好的dom，初始化echarts实例
      const lineChart = echarts.init(document.getElementById('lineChart'))
      // 绘制图表
      lineChart.setOption({
        legend: {
          data: this.legend
        },
        xAxis: {
          type: 'category',
          data: this.dataTime
        },
        yAxis: [
          {
            min: 0,
            max: 100,
            name: '百分比(%)',
            type: 'value'
          },
          {
            type: 'value'
          }
        ],
        series: this.allPrice
      })
    }
  }
}
</script>

<style scoped lang="scss">
#lineChart {
  width: 100%;
  height: 400px;
}
.posTit {
  color: #4c4c4c;
  font-size: 18px;
  font-weight: 600;
  position: absolute;
  top: 0;
}
</style>
